<template>
  <view v-if="!errmsg" class="h100" :style="`--onepx:1px;--safe-top:${safeArea.top}px;--safe-bottom:${props.bottomSafe ? safeArea.bottom : 0}px;--safe-head:${safeArea.head}px;`">
    <view :class="{ 'container-blur': props.loading, h100: true }"><slot></slot></view>
    <view class="container-loading" v-if="props.loading">
      <view class="lb">
        <text class="text" v-if="!!loadingText">{{ loadingText }}</text>
        <view class="load-img-box" v-else>
          <image class="load-img" src="/assets/imgs/default/loading.png"></image>
        </view>
      </view>
    </view>
    <c-authorize :err="authorizeError" @close="authorizeError = null"></c-authorize>
    <slot name="popup"></slot>
  </view>
  <view v-else class="container-errmsg">
    <image class="dfimg" src="/assets/imgs/default/disconnect.png"></image>
    <view class="errmsg-text">{{ errmsg }}</view>
    <view class="link" @tap="reload">点击重试</view>
  </view>
</template>
<script setup>
import { computed, getCurrentInstance, ref, inject, provide } from 'vue';
import { useReady } from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
import { loadingKey, authorizeKey } from '@/constants';
import { useSafeArea } from '@/hooks';
import { CAuthorize } from '.';

const loadingInstance = inject(loadingKey);
const authorizeError = defineModel('authorizeError', Object);
provide(authorizeKey, authorizeError);

const props = defineProps({
  loadingText: String,
  loading: {
    type: Boolean,
    default: true
  },
  bottomSafe: {
    type: Boolean,
    default: true
  },
  message: String
});
const emit = defineEmits(['reload']);
const { emitsOptions } = getCurrentInstance();
const reload = async () => {
  (emitsOptions.reload ? e => emit('reload', e) : loadingInstance?.restart)?.call(null, 200);
};
const safeArea = ref({
  left: 0,
  right: 0,
  top: 20,
  head: 20 + 44,
  bottom: 0
});
const errmsg = computed(() => props.message ?? loadingInstance?.errorMsg);

useReady(() => {
  useSafeArea().then(data => {
    safeArea.value = data;
  });
});
</script>
<style lang="scss">
.h100 {
  height: 100%;
}
.container-blur {
  position: absolute;
  width: 750px;
  height: 100%;
  filter: blur(8px);
}

.container-loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(255, 255, 255, 0.65);
  width: 750px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .lb {
    text-align: center;
    position: relative;
    line-height: 220px;
    margin-top: -50px;
    width: 220px;
    height: 220px;
    font-size: 26px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: var(--loading-img);
    .text {
      color: var(--color-danger);
      font-size: 20px;
    }
    .load-img-box {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .load-img {
      width: 65px;
      height: 65px;
    }
  }
}
.container-errmsg {
  padding-top: 30px;
  text-align: center;
  .link {
    color: var(--color-gray);
    margin-top: 20px;
    font-size: 28px;
  }

  .dfimg {
    width: 600px;
    height: 600px;
    display: block;
    margin: auto;
  }

  .errmsg-text {
    font-size: 36px;
  }
}
</style>
